<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>公共底部</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="fonts/iconfont.css">
		<link rel="stylesheet" href="css/mui.css">
		<style>
			html,
			body {
				background-color: #efeff4;
				color: #929292;
			}
			.iconfont {
				font-family: "iconfont" !important;
				font-size: 1.1em;
				top: 3px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				position: relative;
			}

			.mui-tab-item .mui-tab-label {
				font-size: 11px;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			a .mui-badge {
				line-height: 1.4;
				position: absolute;
				top: -2px;
				left: 100%;
				margin-left: -10px;
				padding: 1px 5px;
				color: white;
				background: red;
			}
		</style>
	</head>

	<body>

		<nav class="mui-bar mui-bar-tab">

			<a href="0" class="mui-tab-item mui-active" id="defaultTab">
				<span class="iconfont icon-xiaoxi"></span>

				<span class="mui-tab-label">消息</span>
			</a>
			<a href="1" class="mui-tab-item">
				<span class="iconfont icon-lianxirenxuanzhong"></span>
				<span class="mui-tab-label">联系人</span>
			</a>
			<a href="2" class="mui-tab-item">
				<span class="iconfont icon-dongtaixuanzhong"><span class="mui-badge">5</span></span>
				<span class="mui-tab-label">动态</span>
			</a>
			<a href="3" class="mui-tab-item">
				<span class="iconfont icon-yijicaidan"></span>
				<span class="mui-tab-label">应用</span>
			</a>
		</nav>

		<script src="js/mui.js"></script>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/myapp.js"></script>
		<script src="js/login.js"></script>
		<script>
			var self, menu;
			var showMenu = false;
			var subpages = ['page/main.html', 'page/linkman.html', 'page/dynamic.html', 'page/setup.html'];
			var subpagesId = ['main.html', 'linkman.html', 'dynamic.html', 'setup.html'];
			var activeTab = 0;

			mui.init({
				swipeBack: false,
				beforeback: back
			});

			function back() {
				if (showMenu) {
					//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
					closeMenu();
					return false;
				} else {
					//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
					menu.hide();
					return true;
				}
			}

			//plusReady事件后，自动创建menu窗口；
			mui.plusReady(function() {
				//localStorage.clear();
				//个人设置
				curuserinfo = getSettings();
				console.log(JSON.stringify(curuserinfo));
				if (curuserinfo==null) {
					console.log("跳转登陆");
					mui.openWindow({
						url: "page/login.html",
						id: "login",
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							aniShow: "zoom-fade-out"
						},
						waiting: {
							autoShow: false //取消等待动画
						}
					});
					return false;
				}
				//构建子页面
				console.log("构建子页面");
				self = plus.webview.currentWebview();
				plus.webview.show('mainpage', "fade-in");
				for (var i = 0; i < 4; i++) {
					var temp = {};
					var sub = plus.webview.create(subpages[i], subpagesId[i], {
						top: '0px',
						bottom: '51px'
					});
					if (i == 0) {
						plus.webview.show('mainpage', "fade-in");
					} else {
						sub.hide();
					}
					self.append(sub);
				}
				//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
				setTimeout(function() {
					//侧滑菜单默认隐藏，这样可以节省内存；
					menu = mui.preload({
						id: 'drag-left-menu',
						url: 'page/drag-left-menu.html',
						styles: {
							left: 0,
							background: 'transparent'
						}
					});
					console.log("创建左侧菜单");
				}, 500);

			});
			/**
			 * 显示侧边栏
			 */
			function openMenu() {
				menu.show('slide-in-left', 200);
				menu.evalJS("$('body>div:first').addClass('fullmsk')");
			}

			/**
			 * 关闭侧滑菜单（业务部分）
			 */
			function closeMenu() {
				menu.close('slide-out-left', 200);
			}
			//在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
			//故，在dragleft，dragright中preventDefault
			window.addEventListener('dragright', function(e) {
				e.detail.gesture.preventDefault();
			});
			window.addEventListener('dragleft', function(e) {
				e.detail.gesture.preventDefault();
			});
			//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
			window.addEventListener("swiperight", openMenu);
			//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
			window.addEventListener("swipeleft", closeMenu);

			mui("nav").on('tap', 'a', function() {
				var index = this.getAttribute('href');
				index = Number(index);
				if (index == activeTab) {
					return;
				}
				plus.webview.show(subpagesId[index]);
				plus.webview.hide(subpagesId[activeTab]);
				activeTab = index;
			});
		</script>
	</body>
</html>
